import React, { Component } from 'react';
import {
  StyleSheet, Text, View, TouchableOpacity, Image, FlatList, TextInput, ScrollView, PixelRatio, Dimensions
} from "react-native";
import { GLOBAL } from '../../../config/global';
import { PageStatusIndex } from '../../../component/page-status/PageStatusIndex';
import { API, API_GENERATE } from '../../../config/api';
import HTTP from '../../../utils/http';
import { style } from '../../../theme/style';
import { Common } from '../../../component/common/Common.js';
import { CommonDialog } from '../../../components/common/Dialog';
import MethodUtil from '../../../utils/MethodUtil'

const scale = GLOBAL.SCALE;
export class BillDetail extends Component {
  static navigationOptions = ({ navigation, navigationOptions }) => {
    return {
      headerTitle: '采购已入库未付款',
      headerTintColor: style.color.white,
      headerLeft: <Common type="headLeft" onPress={() => { navigation.goBack() }} color='#fff' />,
      headerRight: (<Image style={style.head.headRightEmpty} source={require('../../../imgs/goBackEmpty.png')} />),
      headerStyle: style.head.headerStyle,
      headerTitleStyle: {
        flex: 1,
        textAlign: 'center',
      }
    }
  };

  constructor(props) {
    super(props)
		let { companyId,corpId,realAmount,instockNotPayAmount } = props.navigation.state.params || {};
    this.state = {
			status: 'data',
			list:[]
		}
		this.companyId = companyId;
		this.corpId = corpId;
		this.realAmount = realAmount;
		this.instockNotPayAmount = instockNotPayAmount;
  }

  componentWillMount () {
    this.initPage();
  }

  async initPage () {
    this.setState({
      status: 'loading'
    })
    let res = await HTTP.POST(API_GENERATE(API.PURCHASE_BILL), {
      companyId: this.companyId,
      corpId: this.corpId
		}); // TODO
		let list = Object.keys(res).map(key => ({orderId:key, data:res[key]}))
		console.log(list)
    this.setState({
      list,
      status: res ? 'data' : 'error',
    })
  }

  render () {
		let {list} = this.state
    return (
      <View style={styles.container}>
				<View style={styles.topbg}>
					<View style={styles.banner}>
						<View style={styles.bannerHorizontal}>
							<View style={styles.bannerItem}>
								<Text style={styles.banneTag}>
									订单实际占用
								</Text>
								<Text style={styles.bannerTitle}>
									已付款未入库
								</Text>
								<Text style={styles.bannerNum}>
									¥ {MethodUtil.toThousands(this.realAmount, 2)}
								</Text>
							</View>
							<View style={styles.bannerItem}>
								<Text style={styles.bannerTitle}>
									已入库未付款 
								</Text>
								<Text style={styles.bannerNum}>
									¥ {MethodUtil.toThousands(this.instockNotPayAmount, 2)}
								</Text>
							</View>
						</View>
						<View style={styles.line}></View>
						<View style={styles.bannerHorizontal}>
							<View style={styles.bannerItem}>
								<Text style={styles.bannerTitle}>
									企业占用
								</Text>
								<Text style={styles.bannerNum}>
									¥ {MethodUtil.toThousands(this.realAmount-this.instockNotPayAmount, 2)}
								</Text>
							</View>
							<Text style={styles.remark}>
							（* 企业占用= 已付款未入库-已入库未付款）
							</Text>
						</View>
					</View>
				</View>
				<ScrollView style={styles.billContainer}>
					<Text style={styles.billTitle}>已入库未付款明细</Text>
						{list.map((item,index)=>{
							return(
								<View key={index} style={styles.billItem}>
									<Text>{item.orderId}</Text>
									<View style={styles.billContain}>
										{item.data.map((j,i)=>{
											return(
												<View key={i} style={styles.billContainItem}>
													{i>0?<View style={styles.billLine}></View>:null}
													<View style={styles.billHorizontal}>
														<Text>{j.occurDate}</Text>
														<Text>¥{MethodUtil.toThousands(j.occurAmount, 2)}</Text>
													</View>
													<View>
														<Text>{j.staffName}|{j.teamName}| {j.organName}</Text>
													</View>
												</View>
											)
										})
										}
									</View>
								</View>
							)
						})
						}
				</ScrollView>
      </View>
    )
  }
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    backgroundColor: style.color.bgGray,
  },
	topbg:{
		backgroundColor:'#0087FF',
	},
	banner:{
		backgroundColor:'#fff',
		borderRadius:3*scale,
		paddingVertical:17*scale,
		margin:9*scale,
	},
	bannerHorizontal:{
		// marginRight:40*scale,
		alignItems:'flex-end'
	},
	bannerItem:{
		flexDirection:'row',
		alignItems:'center',
		marginBottom:15*scale
	},
	banneTag:{
		fontSize: 10,
		color: '#FFFFFF',
		backgroundColor:'#F7B500',
		borderRadius:1*scale,
		paddingHorizontal:5*scale,
		paddingVertical:4*scale,
		marginLeft:72*scale,
		marginRight:18*scale
	},
	bannerTitle:{
		fontSize:12*scale,
		marginRight:5*scale
	},
	line:{
		height:1 / PixelRatio.get(),
		backgroundColor:'rgb(172,172,172)',
		marginBottom:10*scale,
	},
	remark:{
		opacity: 0.62,
		fontSize: 10,
		color: '#000000',
		marginRight:40*scale
	},
	bannerNum:{
		fontWeight:'600',
		width:140*scale,
	},
	billContainer:{
		marginTop:20*scale,
		paddingHorizontal:15*scale,
		flex:1
	},
	billTitle:{
		fontSize:14*scale,
		color:'#000',
		fontWeight:'600',
		marginBottom:25*scale
	},
	billItem:{
		marginBottom:17*scale
	},
	billContain:{
		marginTop:6*scale,
		backgroundColor:"#fff",
		borderRadius:4*scale,
		paddingHorizontal:12*scale,
		paddingVertical:20*scale
	},
	billHorizontal:{
		flexDirection:'row',
		alignItems:'center',
		marginBottom:15*scale,
		justifyContent:'space-between',
		marginRight:50*scale,
	},
	billLine:{
		height:1 / PixelRatio.get(),
		backgroundColor:'#E0E0E0',
		marginVertical:22*scale
	}
})